<template>
	<view class="manhua_content">
		<u-loading-page :loading="loading" bg-color="#e8e8e8"></u-loading-page>
		<view class="manhua_top" v-show="showTop">
			<view style="margin-left: 20px;" @click="go_index">
				< {{now_page.split('、')[1]}}
			</view>
			<view style="margin-right: 20px;" @click="loveCartoon">
				<image :src="isLove?'../../static/love.png':'../../static/nolove.png'" style="width:25px;height: 25px;"></image>
			</view>
		</view>
		<u-overlay :show="show" @click="change_show" zIndex="666" :opacity="lightSize"></u-overlay>
		<view class="manhua_img" @click="change_show">
			<image v-for="(item,index) in images_data" :key="index" :src="api + item" style="height: auto;" mode="widthFix"></image>
			<u-loadmore :status="status" />
		</view>
		<view class="manhua_bottom" v-show="showBottom">
			<view class="manhua_passage">
				<view class="back_pass" @click="bck_page">
					上一章
				</view>
				<view style="width: 200px;">
					<u-slider v-model="value" min="0" max="7" blockSize="12" @changing="chang_light"></u-slider>
				</view>
				<view class="next_pass" @click="next_page">
					下一章
				</view>
			</view>
			<view class="manhua_bottom_icons">
				<view class="icon_item" @click="open_mulu">
					<view>
						<image src="../../static/manhua/mulu.png" style="width: 25px;height: 25px;"></image>
					</view>
					<view style="color:white;font-size: 12px;text-align: center;">
						目录
					</view>
				</view>
				<view class="icon_item" @click="yejian">
					<view>
						<image :src="value==0?'../../static/manhua/night_sel.png':'../../static/manhua/night.png'" style="width: 25px;height: 25px;"></image>
					</view>
					<view :style="value==0?'color:#f4ea2a;font-size: 12px;text-align: center;':'color:white;font-size: 12px;text-align: center;'">
						夜间模式
					</view>
				</view>
				<view class="icon_item" @click="rijian">
					<view>
						<image :src="value==7?'../../static/manhua/sun_sel.png':'../../static/manhua/sun.png'" style="width: 25px;height: 25px;"></image>
					</view>
					<view :style="value==7?'color:#f4ea2a;font-size: 12px;text-align: center;':'color:white;font-size: 12px;text-align: center;'">
						日间模式
					</view>
				</view>
				<view class="icon_item">
					<view>
						<image src="../../static/manhua/set.png" style="width: 25px;height: 25px;"></image>
					</view>
					<view style="color:white;font-size: 12px;text-align: center;">
						设置
					</view>
				</view>
			</view>
		</view>
		<view class="mulu_model" v-show="mulu_show">
			<view class="page_top">
				<view >
					全部章节
				</view>
				<view @click="sorted_page">
					升序/降序
				</view>
			</view>
			<view v-for="(item,index) in mulu_data" :key="index" class="page_item" @click="choose_page(item)">
				{{item.split('、')[1]}}
			</view>
		</view>
	</view>
</template>

<script>
import api from '../../api/config'
	export default {
		data() {
			return {
				showTop: false,
				showBottom: false,
				show: true,
				lightSize: 0,
				value: 7,
				cartoonName: '',
				images_data: [],
				loading: true,
				status: 'loadmore',
				now_page: '',
				old_mulu_data: [],
				mulu_data: [],
				mulu_show: false,
				isLove: false,
				api: api
			}
		},
		onLoad(option) {
			this.cartoonName = option.cartoonName
		},
		mounted() {
			this.get_imags()
			uni.request({
				url:api + '/get_love/',
				method:'POST',
				data:{
					username: uni.getStorageSync('mobile'),
					cartoonId: 20020,
					cartoonName: this.cartoonName
				},
				success:res=>{
					this.isLove = res.data.isLove
				}
			})
		},
		methods: {
			loveCartoon() {
				uni.request({
					url:api + '/love_car/',
					method:'POST',
					data:{
						username: uni.getStorageSync('mobile'),
						cartoonName: this.cartoonName,
						cartoonImg: '/static/cartoon_resources/'+this.cartoonName+'/'+this.cartoonName+'.jpg',
						description: '',
						cartoonId: -1,
						isLove: !this.isLove
					},
					success:res=>{
						if(res.data.state=='OK'){
							this.isLove = !this.isLove
						}
					}
				})
			},
			bck_page() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.images_data = []
				this.loading = true
				let bck_page = this.old_mulu_data.indexOf(this.now_page) - 1
				if(bck_page < 0){
					return
				}
				uni.request({
					url:api + '/mobile_get_page_imgs/',
					method:'POST',
					data:{
						cartoonName: this.cartoonName,
						page: this.old_mulu_data[bck_page]
					},
					success:res=>{
						this.images_data = res.data.images_data
						this.now_page = res.data.now_page
						this.loading = false
					}
				})
			},
			next_page() {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.images_data = []
				this.loading = true
				let next_page = this.old_mulu_data.indexOf(this.now_page) + 1
				if(next_page >= this.old_mulu_data.length){
					return
				}
				uni.request({
					url:api + '/mobile_get_page_imgs/',
					method:'POST',
					data:{
						cartoonName: this.cartoonName,
						page: this.old_mulu_data[next_page]
					},
					success:res=>{
						this.images_data = res.data.images_data
						this.now_page = res.data.now_page
						this.loading = false
					}
				})
			},
			sorted_page() {
				this.mulu_data.reverse()
			},
			choose_page(page) {
				uni.pageScrollTo({
					scrollTop: 0,
					duration: 0
				});
				this.images_data = []
				this.loading = true
				uni.request({
					url:api + '/mobile_get_page_imgs/',
					method:'POST',
					data:{
						cartoonName: this.cartoonName,
						page: page
					},
					success:res=>{
						this.images_data = res.data.images_data
						this.now_page = res.data.now_page
						this.loading = false
					}
				})
			},
			open_mulu(){
				this.mulu_show = true
				this.showTop = false
				this.showBottom = false
			},
			onReachBottom() {
				this.status = 'loading';
				setTimeout(() => {
					let next_page = this.mulu_data.indexOf(this.now_page) + 1
					uni.request({
						url:api + '/mobile_get_page_imgs/',
						method:'POST',
						data:{
							cartoonName: this.cartoonName,
							page: this.mulu_data[next_page]
						},
						success:res=>{
							this.images_data.push(...res.data.images_data)
							this.now_page = res.data.now_page
						}
					})
					this.status = 'nomore'
				}, 1500)
			},
			get_imags() {
				this.loading = true
				uni.request({
					url:api + '/mobile_get_imgs/',
					method:'POST',
					data:{
						cartoonName: this.cartoonName
					},
					success:res=>{
						this.images_data = res.data.images_data
						this.now_page = res.data.now_page
						this.mulu_data = res.data.mulu_data
						this.old_mulu_data = res.data.mulu_data
						this.loading = false
					}
				})
			},
			change_show() {
				if(this.showTop){
					this.showTop = false
					this.showBottom = false
				}else{
					if(this.mulu_show){
						this.mulu_show = false
						return
					}
					this.showTop = true
					this.showBottom = true
				}
				
			},
			chang_light(val) {
				this.lightSize = 0.7 - val/10
			},
			yejian() {
				this.value = 0
				this.lightSize = 0.7
				this.show = true
				// uni.setScreenBrightness({
				// 	value:0.2,
				// 	success:res=>{
				// 		console.log(res)
				// 	}
				// })
			},
			rijian() {
				this.value = 7
				this.lightSize = 0
				this.show = true
			},
			go_index() {
				uni.switchTab({
					url:'/pages/index/index'
				})
			}
		}
	}
</script>

<style>
	.manhua_content{
		/* padding-top: 50px; */
	}
	.manhua_top{
		width: 100%;
		height: 85px;
		padding:0 0 8px 0;
		background-color: black;
		opacity: 0.8;
		position: fixed;
		z-index: 999;
		display: flex;
		justify-content: space-between;
		align-items: flex-end;
	}
	.manhua_top view{
		color: white;
	}
	.manhua_bottom{
		width: 100%;
		height: 100px;
		background-color: black;
		opacity: 0.8;
		position: fixed;
		bottom: 0;
		z-index: 999;
	}
	.manhua_passage{
		padding: 0 15px 0 15px;
		display: flex;
		justify-content: space-between;
	}
	.back_pass{
		color: white;
		font-size: 12px;
		padding-top: 10px;
	}
	.next_pass{
		color: white;
		font-size: 12px;
		padding-top: 10px;
	}
	.manhua_bottom_icons{
		padding: 5px 30px 10px 30px;
		display: flex;
		justify-content: space-between;
	}
	.icon_item{
		display: flex;
		flex-direction: column;
		justify-content: flex-start;
		align-items: center;
	}
	.mulu_model{
		height: 400px;
		width: 100%;
		background-color: black;
		opacity: 0.8;
		position: fixed;
		bottom: 0;
		z-index: 999;
		overflow-y: scroll;
	}
	.page_item{
		padding: 10px 0 0 30px;
		font-size: 15px;
		color: white;
	}
	.page_top{
		display: flex;
		justify-content: space-between;
		position: sticky;
		top: 0;
		z-index: 1004;
		background-color: black;
	}
	.page_top view{
		padding: 10px 20px 10px 20px;
		font-size: 15px;
		color: white;
	}
	.manhua_img{
		text-align: center;
	}
</style>
